Represented by
the window
obj in the browser
and the global
obj in
Node.js.
Try to avoid
these as much as
possible.
Local Scope
Scope within a
function.
Includes function
arguments,
variables declared
within function,
also any variables
already declared
when the
function was
defined
Block Scope
Contents within
curly
braces.
Scope Chaining: Variables and
Scope
1
let
name
="Fiona";
2
β
3
// we aren't passing
in or defining and
variables
4
functionhungryHippo(){
5
console.log(name
+" is
hungry!");
6
}
7
β
8
hungryHippo();// => "Fiona is
hungry"
Copied!
A key scoping rule is that
an inner scope does
have access to variables in
the outer scope.
Scope Chaining
: When a variable is not
found within the immediate
scope, JS will keep
searching outwards until it
matches the one we are
referencing.
Important to note while
inner scopes can search
outwards, outer scopes
cannot reference inner
variables!
Lexical Scope
Lexing Time
: When you run a piece of JS
code that is parsed before
it is run.
JS language does not have
dynamic scope.
Different Variables in
Javascript
A variable always
evaluates to the value it
contains no matter how you
declare it.
The different ways to declare
variables
let
: can be re-assigned;
block-scoped.
const
: no re-assignment; block
scoped.
var
: May or may not be
re-assigned; scoped to a
function.
Hoisting and Scoping with
Variables
Hoisting
is a JavaScript mechanism where
variables and function declarations
are moved to the top of their scope
before code execution.
Function-Scoped Variables
As we learned, var creates
function-scoped variables,
this means our declared var
keyword variable will be
confined to the scope of our
current function.
Hoisting with function-scoped
variables
1
functiontest(){
2
// var hoistedVar;
3
console.log(hoistedVar);// => undefined
4
var
hoistedVar
=10;
5
}
Copied!
Even though we initially
declared & initizalized
our variable underneath the
console.log var variables
are "hoisted" to
the top, but only in
declaration.
Block-Scoped Variables
Things that create
block-scopes:
If Statements
While Loops
Switch Statements
For Loops
Properties of Constants
They are block-scoped like
let.
JS will enforce constants
by raising an error if you
try to change them.
Constants that are assigned
to Reference Types are mutable
Hoisting with block-scoped
variables
Unlike vars in function
scopes, let and const in
their block scopes do not
get their declarations
hoisted.
Instead they are not
initalized until their
definitions are evaluated -
instead of undefined we will
get an error.
Temporal Dead
Zone
: The time before a let or
const variable is
declared.
Function Scope vs Block Scope
The downside of the
flexibility of var is that
it can easily overwrite
previously declared
variables.
The block-scope limitations
of let and const were
introduced to easily avoid
accidentally overwriting
variable values.
Global Variables
Any variables declared
without a declaration term
will be considered global scope.
Every time a variable is
declared on the global
scope, the change of
collision increases.
Use the proper declarations
to manage your code: Avoid
being a sloppy
programmer!
Closures
Calculating Closures
Closure
: The combination of a
function and the lexical
environment within which
that function is
declared.
Use
: A closure is when an inner
function uses, or changes,
variables in an outer
function.
Very important for
creativity, flexibility, and
security of your code.
Lexical
Environment
: Consists of any variables
available within the scope
in which a closure was
declared (local inner,
outer, and global).
Closures and Scope
Basic Closure Rules:
Closures have access to all
variables in it's
lexical environment.
A closure will keep
reference to all the
variables when it was
defined even if the outer
function has
returned.
Applications of Closures
Private State
JS does not have
a way of declaring
a function as
exclusively
private, however
we can use
closures to make a
private
state.
Passing Arguments
Implicitly
We can use
closures to pass
down arguments to
helper
functions.
1
functionisPalindrome(string){
2
functionreverse(){
3
return
string.split("").reverse().join("");
4
}
5
β
6
return
string
===reverse();
7
}
Copied!
Context in Javascript
Scope
: Refers to the visibility
and availability of
variables.
Context
: Refers to the value of the this
keyword when code is
executed.
What about
this
?
This
: Keyword that exists in
every function and evaluates
to the object that is
currently invoking that
function.
Method-Style
Invocation
: syntax goes like object.method(arg). (i.e. array.push,
str.toUpperCase()
Context
refers to the value of this
within a function and this
refers to where a function
is invoked.
Issues with Scope and Context
If this
is called using normal
function style invocation,
our output will be the
contents of the global
object.